<template>
  <div class="root">
    <div class="form-search-card">
      <el-form
        :model="queryParams"
        ref="queryRef"
        v-show="showSearch"
        :inline="true"
        label-width="68px"
      >
        <el-form-item prop="name">
          <el-input
            v-model="queryParams.name"
            placeholder="请输入拍卖名称"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="dateRange"
            value-format="YYYY-MM-DD"
            type="daterange"
            range-separator="-"
            start-placeholder="拍卖开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item prop="status">
          <el-select
            v-model="queryParams.status"
            placeholder="请选择拍卖状态"
            clearable
          >
            <el-option
              v-for="dict in statusList"
              :key="dict.value"
              :label="dict.name"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetQuery">重置</el-button>
          <el-button type="primary" @click="handleQuery">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-row :gutter="20" class="table-card">
      <el-col :span="6" class="list-item">
        <el-card class="list-item-add list-item-card">
          <el-button type="primary" @click="handleAdd">
            <svg-icon icon-class="plus_auction" class="icon-right"></svg-icon>
            <span>创建拍卖活动</span>
          </el-button>
        </el-card>
      </el-col>
      <el-col
        :span="6"
        v-for="(item, index) in dataList"
        :key="item.auctionId"
        class="list-item"
      >
        <div class="list-item-index">#{{ index + 1 }}</div>
        <el-card
          class="list-item-card"
          :class="[
            item.status === 0
              ? 'card-grey'
              : item.status === 3
              ? 'card-black'
              : 'card-green',
          ]"
        >
          <div class="list-item-content">
            <div class="list-item-time list-item-text">
              {{ `${item.startTime}-${item.endTime}` }}
            </div>
            <div class="list-item-title list-item-text">
              {{ item.title }}
            </div>
            <div class="list-item-intro list-item-text">
              {{ item.intro }}
            </div>
            <div class="list-item-status list-item-text">
              <el-tag
                :class="[
                  item.status === 0
                    ? 'status-grey'
                    : item.status === 3
                    ? 'status-black'
                    : 'status-green',
                ]"
                type="info"
                >{{
                  item.status === 0
                    ? "未发布"
                    : item.status === 1
                    ? "未开始"
                    : item.status === 2
                    ? "进行中"
                    : "已结束"
                }}</el-tag
              >
            </div>
          </div>
          <el-row class="list-item-icon list-border-top">
            <el-col :span="6">
              <svg-icon icon-class="audit" class="icon-right"></svg-icon>
              {{ item.audit_count }}
            </el-col>
            <el-col :span="6">
              <svg-icon icon-class="product" class="icon-right"></svg-icon>
              {{ item.product_count }}
            </el-col>
          </el-row>
          <el-row class="list-item-bottom list-border-top">
            <el-col
              :span="getColSpan(item)"
              class="list-bottom-span"
              @click="hanldeAudit(item)"
            >
              <el-button text>
                <svg-icon icon-class="view" class="icon-right"></svg-icon>
                <span>查看</span>
              </el-button>
            </el-col>
            <el-col
              v-if="item.status === 0"
              :span="getColSpan(item)"
              class="list-bottom-span"
              @click="hanldeAudit(item)"
            >
              <el-button text>
                <svg-icon
                  icon-class="edit_auction"
                  class="icon-right"
                ></svg-icon>
                <span>编辑</span>
              </el-button>
            </el-col>
            <el-col
              v-if="item.status === 0"
              :span="getColSpan(item)"
              class="list-bottom-span"
              @click="hanldeAudit(item)"
            >
              <el-button text>
                <svg-icon icon-class="delete" class="icon-right"></svg-icon>
                <span>删除</span>
              </el-button>
            </el-col>
            <el-col
              v-if="item.status === 0"
              :span="getColSpan(item)"
              class="list-bottom-span last-span"
            >
              <el-button text @click="hanldeAudit(item)">
                <svg-icon icon-class="publish" class="icon-right"></svg-icon>
                <span>发布</span>
              </el-button>
            </el-col>
            <el-col
              v-if="item.status === 1"
              :span="getColSpan(item)"
              class="list-bottom-span last-span"
            >
              <el-button text @click="hanldeAudit(item)">
                <svg-icon
                  icon-class="cancel_publish"
                  class="icon-right"
                ></svg-icon>
                <span>取消发布</span>
              </el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <pagination
        class="auction-pagination"
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.current"
        v-model:limit="queryParams.pageSize"
        layout="total, prev, pager, next"
        @pagination="getList"
      />
    </el-row>
  </div>
</template>

<script setup>
import { ref } from "vue";
const router = useRouter();
const { proxy } = getCurrentInstance();

const dataList = ref([]);
const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);
const dateRange = ref([]);
const statusList = ref([
  {
    name: "未发布",
    value: 0,
  },
  {
    name: "未开始",
    value: 1,
  },
  {
    name: "进行中",
    value: 2,
  },
  {
    name: "已结束",
    value: 3,
  },
]);
const data = reactive({
  form: {},
  queryParams: {
    current: 1,
    pageSize: 10,
    name: undefined,
    status: undefined,
  },
});

const { queryParams, form } = toRefs(data);
const api = {
  status_list: "calcResult/dict/",
  city_list: "calcResult/sysCityList",
  list: "/calcApprove/list",
  commit: "/calcResult/commit",
};
/** 查询列表 */
function getList() {
  loading.value = true;
  let data = queryParams.value;
  let date = dateRange.value;
  date = Array.isArray(date) ? date : [];
  data.startTime = date[0];
  data.endTime = date[1];
  let list = [];
  for (let i = 0; i < 11; i++) {
    const val = {
      auctionId: i + 1,
      startTime: "23.11.02 at 00:00:00",
      endTime: "23.11.04 at 23:59:59",
      title: "拍卖活动0-1CNY营销",
      intro: "拍卖活动活动描述字段，拍卖活动活动描述字",
      status: i > 1 && i < 5 ? 1 : i > 4 && i < 9 ? 2 : i > 8 ? 3 : 0,
      audit_count: 31,
      product_count: 55,
    };
    list.push(val);
  }
  dataList.value = list;
  total.value = 120;
  loading.value = false;
}
/** 发布按钮操作 */
function handlePublish(item) {}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.current = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  dateRange.value = [];
  proxy.resetForm("queryRef");
  handleQuery();
}
/** 查看按钮操作 */
function hanldeView(item) {
  router.push("/headquarters/auctioncenter/auctiondetail" + item.auctionId);
}
/** 创建拍卖按钮操作 */
function handleAdd() {
  router.push("/headquarters/auctioncenter/addauction");
}
function getColSpan(item) {
  return item.status === 0 ? 6 : item.status === 1 ? 12 : 24;
}
getList();
</script>
<style lang="scss" scoped>
.root {
  .icon-right {
    margin-right: 6px;
  }
  .form-search-card {
    padding: 24px;
    border-bottom: 1px solid #dadbda;
    ::v-deep(.el-input__wrapper) {
      background-color: #f4f4f4;
    }
  }
  .table-card {
    margin: 16px 14px !important;
    .list-item {
      .list-item-index {
        font-size: 12px;
        font-weight: 400;
        color: #a9a9a9;
        line-height: 17px;
        margin-bottom: 4px;
      }
      .list-item-add {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #f4f4f4;
        margin-top: 22px;
        height: calc(100% - 22px);
        button {
          padding: 12px 22px;
          border-radius: 0;
        }
      }
      .card-grey {
        border-left: 4px solid #808285 !important;
      }
      .card-green {
        border-left: 4px solid #0b8c49 !important;
      }
      .card-black {
        border-left: 4px solid #000000 !important;
      }
      .list-item-card {
        ::v-deep(.el-card__body) {
          padding: 0 !important;
        }
        box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.06);
        border: 1px solid #dadbda;
        .list-border-top {
          border-top: 1px solid #dadbda;
        }
        .list-item-icon {
          padding: 10px 20px;
        }
        .list-item-content {
          padding: 20px;

          .list-item-text {
            padding: 5px 0;
          }
          .list-item-time {
            font-size: 12px;
            font-weight: 400;
            color: #3e3e3e;
            line-height: 17px;
          }
          .list-item-title {
            font-size: 16px;
            font-weight: 500;
            color: #000000;
            line-height: 22px;
          }
          .list-item-intro {
            font-size: 14px;
            font-weight: 400;
            color: #000000;
            line-height: 20px;
          }
          .list-item-status {
            .status-green {
              color: #0b8c49;
            }
            .status-grey {
              color: #808285;
            }
            .status-black {
              color: #000000;
            }
          }
          .list-submit-text {
            margin-right: 5px;
          }
        }
        .list-item-bottom {
          display: flex;
          justify-content: space-around;
          align-items: center;
          .list-divider {
            margin: 14px 8px;
          }
          .list-bottom-span {
            border-right: 1px solid #dadbda;
            button {
              height: 44px;
              width: 100%;
            }
          }
          .last-span {
            border-right: none;
          }
        }
      }
    }
    .auction-pagination {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      ::v-deep(.el-pagination) {
        right: auto;
      }
    }
  }
}
</style>
